<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/header.jsp"%>

<style type="text/css">

form#writeForm * {
	margin-top: 5px;
	margin-bottom: 5px;
}

label.label_password {
	margin-left: 350px;
}

label.label_stopbot {
	margin-left: 700px;
}

form#writeForm button#write_submit {
	margin-left: 965px;
}

form#writeForm span#random_number {
	color: red;
}

</style>

<div class="container">
	<div class="content">
		<article>
			<div id="write">
				<form id="writeForm" action="" method="post" enctype="multipart">
					<label class="label_name">이름</label> <input id="name" type="text" name="name" placeholder="이름을 입력해주세요." autofocus>
					<label class="label_password">비밀번호</label> <input id="password" type="password" name="password" placeholder="비밀번호를 입력해주세요.">
					<label>비밀번호 확인</label> <input type="password" id="check_password" name="check_password" placeholder="다시한번 비밀번호를 입력해주세요."><br>
					<label>제목</label> <input type="text" id="title" name="title" size="80" placeholder="제목을 입력해주세요.">
					<label>비밀글</label> <input type="checkbox" id="privacy" name="privacy" > <br>
					<label>본문</label><br>
					<textarea id="content" name="content" rows="20" cols="123" placeholder="본문을 입력해주세요."></textarea> <br>
					<label>파일첨부</label> <input type="file" name="file"> <br>
					<label class="label_stopbot" >자동입력 방지 :</label> <span id="random_number"></span>
					<input id="stopbot" type="text" name="stopbot" placeholder="자동입력 방지를 위해 숫자를 입력해주세요."> <br>
					<button id="write_submit">저장</button>
				</form>
			</div>
		</article>
	</div>
</div>

<script type="text/javascript">
	function init() {
		createRandomNumber(jQuery('#random_number'));
		addActionListener();
	}
	
	function addActionListener() {
		jQuery('#write_submit').on('click', submitBtnHandler);		
	}
	
	function createRandomNumber(element) {
		var rnum = parseInt(Math.random() * 100000);
		element.html(rnum);
	}
	
	function submitBtnHandler() {
		//타겟을 지정해주면 그창으로 결과를 리턴
		//var gsWin = window.open('about:blank','payviewer','width=500,height=500');
		//var form = document.getElementById('writeForm');
		//form.action = '${initParam.base_path}/board.action?method=getContentList';
		//form.target = "payviewer";
		//form.submit();
		writeContent();
		return false;
	}
	
	function sameCheck(text1, text2) {
		return text1 === text2;
	}
	
	function writeContent() {
		var password1 = jQuery('#password').val(),
			password2 = jQuery('#check_password').val(),
			stopbot = jQuery('#stopbot').val(),
			random_number = jQuery('#random_number').text();
			//privacy = jQuery('#privacy').prop('checked') === true ? 1 : 0, on이라고 찍힌다.
			//title = jQuery('#title').val(),
			//name = jQuery('#name').val(),
			//content = jQuery('#content').val();
			
		if(!sameCheck(password1, password2)) {
			return false;
		}
		
		if(!sameCheck(stopbot, random_number)) {
			return false;
		}
		
		jQuery('#writeForm').attr('action', '${initParam.base_path}/write.action?method=writeContent').submit();
	}
</script>

<%@ include file="/common/footer.jsp"%>